<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>图片投票</title>
    <script src="static/vue.js"></script>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        body {
            background-color: #F2F6F9;
        }

        .titles {
            width: 100%;
        }

        .title1 {
            width: 169px;
            height: 172px;
            margin: 46px auto 0;
        }

        .title1 img {
            width: 169px;
            height: 172px;
        }

        .title2 {
            margin: 7px auto 0;
            color: rgba(16, 16, 16, 1);
            font-size: 36px;
            text-align: center;
            font-family: SourceHanSansSC-regular;
        }

        .title3 {
            width: 865px;
            margin: 15px auto 0;
            color: rgba(16, 16, 16, 1);
            font-size: 18px;
            text-align: center;
            font-family: SourceHanSansSC-regular;
        }

        .content {
            margin: 50px auto 0;
            width: 1000px;
            background-color: #FFFFFF;
            font-size: 14px;
            box-shadow: 0px 0px 5px 0px rgba(170, 170, 170, 1);
            font-family: Roboto;
        }

        .div {
            width: 100%;
            height: 1px;
        }

        .ctop {
            width: 900px;
            height: 5px;
            background-color: #F2F6F9;
            margin: 24px auto 0;
        }

        .content1 {
            width: 900px;
            height: 400px;
            margin: 30px auto 0;
            display: flex;
            border-bottom: 1px solid rgb(223, 223, 223);
        }

        .c1 {
            width: 50%;
            height: 100%;
        }
        .c1top{
            width: 100%;
            height: 231px;
        }

        .c1left {
            display: inline-block;
            width: 30px;
            height: 30px;
            line-height: 30px;
            text-align: center;
            color: #ffffff;
            border-radius: 50%;
            background-color: #2b75f2;
            margin-left: 20px;
            float: left;
        }

        .c1right {
            width: 317px;
            height: 231px;
            margin-left: 10px;
            float: left;
            background-size: cover;
        }
        .c1right div{
            width: 30px;
            height: 30px;
            text-align: center;
            float: right;
            margin:5px 5px 0 0;
            border-radius: 50%;
            background-color: #986f83;
        }
        .c1right img {
            width: 23px;
            height: 23px;
            margin-top: 2px;
        }
        .bottom1{
            height: 30px;
            display: flex;
            margin: 5px 0 0 60px;
        }
        .labels{
            width: 25px;
            height: 25px;
            border-radius: 50%;
            border: 1px solid #cccccc;
        }
        .labelsc {
            background-color: rgba(43, 117, 242, 1);
            background-image: url("imgs/勾.png");
            background-size: cover;
        }
        .inp{
            width: 25px;
            height: 25px;
            opacity: 0;
        }
        .bottom1 div{
            margin-left: 5px;
            color: rgba(16, 16, 16, 1);
            font-size: 18px;
            font-family: SourceHanSansSC-regular;
        }
        .cbottom{
            width: 280px;
            height: 50px;
            margin: 30px auto;
            line-height: 50px;
            border-radius: 4px;
            background-color: rgba(43, 117, 242, 1);
            color:white;
            font-size: 20px;
            text-align: center;
            font-family: Roboto;
        }
        .dd{
            width: 100%;
            height: 30px;
        }
    </style>
</head>
<body>
<div id="app">
    <div class="titles">
        <div class="title1">
            <img src="imgs/调查报告.gif">
        </div>
        <div class="title2">
            民主测评投票
        </div>
        <div class="title3">
            内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容
            内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容
        </div>
    </div>
    <div class="content">
        <div class="div"></div>
        <div class="ctop"></div>
        <div class="content1" v-for="(item,index) in list">
            <div class="c1" v-for="(item1,index1) in item.list1">
                <div class="c1top">
                    <span class="c1left" >{{item1.num}}</span>
                    <div class="c1right" :style="{'backgroundImage':'url('+item1.bgi+')'}">
                        <div><img src="imgs/search.png" alt=""></div>
                    </div>
                </div>
                <div class="c1bottom">
                    <div class="bottom1" v-for="(item2,index2) in item1.list2">
                        <label class="labels" :class="{labelsc:item2.select}"
                               @click="selects(index,index1,index2)">
                            <input class="inp" type="radio" :name="item2.names">
                        </label>
                        <div class="cd1">{{item2.name}}</div>
                    </div>
                </div>
            </div>
        </div>
        <div class="cbottom">提交</div>
        <div class="dd"></div>
    </div>
</div>
<script>
    var vue=new Vue({
        el:"#app",
        select:false,
        data:{
            list:[
                {
                   list1:[
                       {
                           num:"1",
                           bgi:"imgs/美少女.jpg",
                           list2:[
                               {names:"1", name:"前",select:false},
                               {names:"1", name:"后",select:false},
                               {names:"1", name:"左",select:false},
                               {names:"1", name:"右",select:false},
                           ]
                       },
                       {
                           num:"2",
                           bgi:"imgs/美少女.jpg",
                           list2:[
                               {names:"2", name:"前",select:false},
                               {names:"2", name:"后",select:false},
                               {names:"2", name:"左",select:false},
                               {names:"2", name:"右",select:false},
                           ]
                       }
                   ]
                },
                {
                    list1:[
                        {
                            num:"3",
                            bgi:"imgs/美少女.jpg",
                            list2:[
                                {names:"3", name:"前",select:false},
                                {names:"3", name:"后",select:false},
                                {names:"3", name:"左",select:false},
                                {names:"3", name:"右",select:false},
                            ]
                        },
                        {
                            num:"4",
                            bgi:"imgs/美少女.jpg",
                            list2:[
                                {names:"4", name:"前",select:false},
                                {names:"4", name:"后",select:false},
                                {names:"4", name:"左",select:false},
                                {names:"4", name:"右",select:false},
                            ]
                        }
                    ]
                },
            ]
        },
        methods:{
            selects(index,index1,index2){
                for(var i=0;i<this.list[index].list1[index1].list2.length;i++){
                    if(i==index2){
                        this.list[index].list1[index1].list2[i].select=true;
                    }
                    else {
                        this.list[index].list1[index1].list2[i].select=false;
                    }
                }
            }
        }
    });
</script>
</body>
</html>